<template>
	<view class="index">
		<view class="liveShopping">
			<view class="liveList">
				<view class="liveItem" v-for="(item, index) in room_list" :key="index">
					<view class="liveLeft">
						<image class="liveImage" mode="aspectFill" src="http://img.xiaoniut.com/2021-01-10_5ffa6d4e5b153992.png"></image>
						<view class="mask"></view>
						<view class="liveStatus" v-if="true">
							<view class="live">
								<view class="living-icon">
									<view class="living-icon-col"></view>
									<view class="living-icon-col"></view>
									<view class="living-icon-col"></view>
								</view>
								<text>直播</text>
							</view>
							<view class="heat">
								<text class="custom-icon custom-icon-redu"></text>
								<text>7574</text>
							</view>
						</view>
						<view class="liveStatus2" v-else-if="false">
							<view class="heat">
								<text>回放</text>
							</view>
						</view>
						<view class="liveStatus3" v-else-if="false">预约</view>
						<view class="bottomBox" @tap.stop="prevent">
							<view class="userInfo">
								<image class="avatar" mode="aspectFill" src="http://img.xiaoniut.com/2020-11-27_5fc0ecdd4665f846.png"></image>
								<view class="userText u-line-1">张三的直播间</view>
							</view>
							<view class="shareIcon" @tap="shareEvent(index)">
								<text class="custom-icon custom-icon-share"></text>
							</view>
						</view>
					</view>
					<view class="liveRight">
						<view class="title u-line-2">张三的直播间张三的直播间张三的直播间</view>
						<view class="commodityList" v-if="true">
							<view class="main">
								<image class="mainImage" mode="aspectFill" src="http://img.xiaoniut.com/5feac093f21db350.jpg"></image>
								<view class="mask">
									<view class="text">￥29.9</view>
								</view>
							</view>
							<view class="other">
								<image class="otherImage" mode="aspectFill" src="http://img.xiaoniut.com/2021-01-06_5ff51b7b01f2a683.jpg"></image>
								<view class="mask">
									<view class="text">+<text>24</text></view>
								</view>
							</view>
						</view>
						<view class="description u-line-4" v-else>张三的直播间欢迎您</view>
					</view>
				</view>
			</view>

			<view class="noContent" v-if="room_list.length == 0">
				<image class="noContentImage" mode="widthFix" src="@/static/noLive.png"></image>
				<view class="text">暂无直播</view>
			</view>
		</view>

		<view class="sharePopoup" v-if="sharePopoupShow">
			<view class="mask"></view>
			<view class="content">
				<view class="shareImageBox" @tap="sharePopoupHide" @touchmove="prevent">
					<image class="shareImage" :src="shareImage" mode="widthFix" @tap="prevent"></image>
				</view>
				<view class="shareBox">
					<button size="mini" class="item" hover-class="node" @tap="downloadImage">
						<view class="iconBox download">
							<text class="custom-icon custom-icon-xiazai"></text>
						</view>
						<text class="text">保存本地，分享好友</text>
					</button>
				</view>
			</view>
		</view>

		<canvas canvas-id="myCanvas" id="shareCanvas" style="width: 960px; height:1265px;"></canvas>
		<canvas canvas-id="myQrcode" id="myQrcode" style="width: 260px;height: 260px;"></canvas>
	</view>
</template>

<script>
	import QRCode from '@/common/qrcode.js';
	
	export default {
		data() {
			return {
				room_list: [0],
				user_id: '',
				p: 1,
				is_loading: false,
				is_more: true,
				room_id: 0,
				uuid: 0,
				is_refresh: true,
				sharePopoupShow: false,
				qrImage: '',
				code_url: '',
				shareImage: '',
				live_share_img: '',
				shareIndex: 0
			}
		},
		onLoad: function(options) {

		},
		onShow: function() {

		},
		methods: {
			shareEvent(index) {

				if (index == this.shareIndex && this.shareImage) {
					this.sharePopoupShow = true
				} else {
					this.shareIndex = index
					uni.showLoading({
						title: '海报制作中...'
					})
					this.getRegisterShareCodeImg();
				}
			},
			// 获取注册分享二维码
			getRegisterShareCodeImg () {
				const that = this
				
				new QRCode({
					context: that, // 上下文环境
					canvasId: 'myQrcode', // canvas-id
					usingComponents: false, // 是否是自定义组件
					text: 'https://www.baidu.com/',
					width: 260,
					height: 260,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: 3, // 二维码可辨识度
					cbResult: function (res) { // 生成二维码的回调
						that.qrImage = res;
						that.code_url = res;
						that.getLiveShareImg()
					},
				})
			},
			// 获取直播分享图
			  getLiveShareImg(){
			    let that = this;

			    uni.getImageInfo({
			      src: 'https://img.xiaoniut.com/2020-12-26_5fe6f0952aa67677.png',
			      success:function(res){
			        that.live_share_img = res.path
			        that.canvas();
			      }
			    });
			  },
			/**
			 * 绘图，分享海报
			 */
			canvas: function() {
				const that = this;
				// canvas图片
				const ctx = wx.createCanvasContext('myCanvas')

				/* 背景图 */
				ctx.drawImage('../static/shareBg2.png', 0, 0, 960, 1265) // 添加背景图
				
				/* 分享图图片 */
				ctx.drawImage(this.live_share_img, 0, 0, 960, 768);

				/* 商品名称 */
				const text = '张三的直播间欢迎您';
				let chr = text.split("");
				let temp = "";
				let row = [];
				ctx.setFontSize(36)
				ctx.setFillStyle("#333")
				for (let a = 0; a < chr.length; a++) {
					if (ctx.measureText(temp).width < 850) {
						temp += chr[a];
					} else {
						a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
						row.push(temp);
						temp = "";
					}
				}
				row.push(temp);
				//如果数组长度大于2 则截取前两个
				if (row.length > 2) {
					let rowCut = row.slice(0, 2);
					let rowPart = rowCut[1];
					let test = "";
					let empty = [];
					for (let a = 0; a < rowPart.length; a++) {
						if (ctx.measureText(test).width < 850) {
							test += rowPart[a];
						} else {
							break;
						}
					}
					empty.push(test);
					var group = empty[0] + "..." //这里只显示两行，超出的用...表示
					rowCut.splice(1, 1, group);
					row = rowCut;
				}
				for (var b = 0; b < row.length; b++) {
					ctx.fillText(row[b], 52, 860 + b * 66, 850);
				}

				/* 二维码 */
				ctx.drawImage(this.qrImage, 700, 1000, 200, 200);

				/* 绘制海报 */
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						x: 0,
						y: 0,
						width: 960,
						height: 1265,
						destWidth: 960,
						destHeight: 1265,
						success: (res) => {
							that.shareImage = res.tempFilePath,
							that.sharePopoupShow = true
							
							uni.hideLoading();
						}
					})
				})
			},
			downloadImage() {
				const src = this.shareImage;
		
				// #ifdef  H5
					console.log(src)
					let oA = document.createElement("a");
					oA.download = ''; // 设置下载的文件名，默认是'下载'
					oA.href = src;
					document.body.appendChild(oA);
					oA.click();
					oA.remove(); // 下载之后把创建的元素删除
				// #endif
				
				// #ifndef  H5
				uni.saveImageToPhotosAlbum({ //保存图片
					filePath: src,
					success: (res) => {
						uni.showToast({
							title: '海报已保存，快去分享给好友吧。',
							icon: 'none'
						})
					}
				})
				// #endif
			},
			sharePopoupHide() {
				this.sharePopoupShow = false
			},
			prevent() {
				return;
			},
		}
	}
</script>

<style scoped lang="scss">
.index {
	min-height: 100%;
	background-color: var(--bgColor);
}
.liveShopping {
	height: 100%;
}
.liveList {
	padding: 20rpx 20rpx 0;
}
.liveItem {
	background-color: #ffffff;
	border-radius: 12rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}
.liveLeft {
	position: relative;
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		border-radius: 12rpx;
		box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 100rpx inset;
	}
	.bottomBox {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 6px 10px 6px;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.liveImage {
	width: 330rpx;
	height: 330rpx;
	border-radius: 12rpx;
	vertical-align: middle;
}
.liveStatus {
	position: absolute;
	top: 10rpx;
	left: 10rpx;
	font-size: 24rpx;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	.live {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ff0033;
		padding: 4rpx 12rpx;
		border-radius: 8rpx 0 0 8rpx;

		.living-icon {
			width: 20rpx;
			height: 24rpx;
			position: relative;
			margin-right: 8rpx;

			.living-icon-col {
				display: inline-block;
				width: 4rpx;
				height: 100%;
				margin: 0 2rpx;
				background-color: #ffffff;
				border-radius: 4rpx;
				animation: living-icon-ani .8s linear infinite;
				transform-origin: bottom;
				vertical-align: top;

				&:last-of-type {
					animation-delay: .2s;
					margin-right: 0;
				}

				&:first-of-type {
					animation-delay: -.3s;
					margin-left: 0;
				}
			}
		}
	}

	.heat {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 4rpx 12rpx;
		border-radius: 0 8rpx 8rpx 0;

		.icon-redu {
			font-size: 24rpx;
			margin-right: 8rpx;
		}
	}
}

@keyframes living-icon-ani {
	0% {
		transform: scaleY(.2);
	}

	50% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(.2);
	}
}

.liveStatus2 {
	position: absolute;
	top: 10rpx;
	left: 10rpx;
	font-size: 24rpx;
	color: #ffffff;

	.heat {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 4rpx 16rpx;
		border-radius: 20rpx;

		.line {
			width: 1rpx;
			height: 24rpx;
			background: #ffffff;
			margin: 0 12rpx;
		}
	}
}

.liveStatus3 {
	position: absolute;
	top: 10rpx;
	left: 10rpx;
	font-size: 24rpx;
	color: #ffffff;
	background-color: #2b85e4;
	padding: 4rpx 24rpx;
	border-radius: 20rpx;
}

.userInfo {
	display: flex;
	justify-content: center;
	align-items: center;

	.avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
	}

	.userText {
		font-size: 24rpx;
		font-weight: 600;
		color: #ffffff;
		margin-left: 8rpx;
		width: 120rpx;
	}
}

.shareIcon {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
	.custom-icon {
		color: #ffffff;
	}
}

.liveRight {
	flex: 1;
	box-sizing: border-box;
	height: 330rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.liveRight .title {
	font-size: 34rpx;
	font-weight: 600;
}

.commodityList {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.commodityList .main {
	position: relative;
	border-radius: 12rpx;
	overflow: hidden;
}

.commodityList .main .mask {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.2);
}

.commodityList .main .mask .text {
	font-size: 24rpx;
	color: #ffffff;
	text-align: center;
	position: absolute;
	bottom: 10rpx;
	left: 0;
	right: 0;
}

.commodityList .main .mainImage {
	width: 160rpx;
	height: 160rpx;
	vertical-align: middle;
}

.commodityList .other {
	position: relative;
	border-radius: 12rpx;
	overflow: hidden;
}

.commodityList .other .mask {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.2);
}

.commodityList .other .mask .text {
	font-size: 24rpx;
	color: #ffffff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.commodityList .other .mask .text text {
	font-size: 28rpx;
}

.commodityList .other .otherImage {
	width: 160rpx;
	height: 160rpx;
	vertical-align: middle;
}

.description {
	font-size: 26rpx;
	color: #666666;
}

.noLive {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	.noLiveImage {
		width: 400rpx;
	}

	.text {
		font-size: 28rpx;
		color: #666666;
		margin-top: 32rpx;
	}
}

.sharePopoup {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
}

.sharePopoup .mask {
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.sharePopoup .content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.sharePopoup .content .shareImageBox {
	width: 100%;
	height: calc(100% - 200rpx);
	display: flex;
	justify-content: center;
	align-items: center;
}

.sharePopoup .content .shareImageBox .shareImage {
	width: 580rpx;
}

.sharePopoup .content .shareBox {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 200rpx;
	border-radius: 12rpx 12rpx 0 0;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sharePopoup .content .shareBox .item {
	margin: 0;
	background: none;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.sharePopoup .content .shareBox .item::after {
	border: none;
}
.sharePopoup .content .shareBox .item .iconBox {
	width: 80rpx;
	height: 80rpx;
	border-radius: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20rpx;
}

.sharePopoup .content .shareBox .item .iconBox.weixin {
	background: linear-gradient(90deg, #8cdc76, #4db232);
}

.sharePopoup .content .shareBox .item .iconBox.download {
	background: var(--btnBgColor);
}

.sharePopoup .content .shareBox .item .iconBox .custom-icon {
	color: #ffffff;
	font-size: 44rpx;
}

.sharePopoup .content .shareBox .item .text {
	font-size: 28rpx;
	font-weight: 500;
	line-height: 28rpx;
}

#shareCanvas {
	position: fixed;
	left: 10000px;
}

#myQrcode {
	position: fixed;
	right: 10000px;
}
</style>
